﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <link rel="stylesheet" href="Content/bootstrap.css" />
</head>
<body>
    <div id="app">
        {{ message }}
        <input type="text" v-model="test" />
        <p>{{ test }}</p>


        <table class="table table-bordered table-striped table-hover">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>地址</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in list">
                    <td>{{ item.Name }}</td>
                    <td>{{ item.Sex }}</td>
                    <td>{{ item.Age }}</td>
                    <td>{{ item.Address }}</td>
                </tr>
            </tbody>
        </table>
        


        <ul v-for="n in len">
            <li>{{ n }}</li>
        </ul>


        
        <!--v-if指令测试-->
        <input type="range" min="0" max="100" v-model="number" />
        <input type="number" v-model="number" />
        <input type="button" class="btn btn-primary btn-lg" value="按钮1" v-if="number >= 80" />
        <input type="button" class="btn btn-primary btn-lg" value="按钮2" v-else />

        <input type="button" :class="number > 80 ? 'btn btn-lg btn-primary' : ''" value="我的" />

        <input type="text" @click="showtext('你好啊')" />
    </div>

    <script src="Scripts/vue.js"></script>
    <script src="Scripts/jquery-1.9.1.js"></script>
    <script src="Scripts/bootstrap.js"></script>
    <script>
        var exampleData = {
            message: "你好，世界",
            test: "nini",
            list: [
                { Name: "顾世豪", Sex: "男", Age: 24, Address: "浙江省杭州市" },
                { Name: "习近平", Sex: "女", Age: 65, Address: "北京天安门" }
            ],
            number: 50,
            len: 10
        }
        new Vue({
            el: "#app",
            data: exampleData,
            methods: {
                show: function () {
                    alert("哈哈");
                },
                showtext: function (msg) {
                    alert(msg);
                }
            }
        });
    </script>
</body>
</html>
